<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const router = useRouter()

const ruleFormRef = ref()
// 保存输入框输入的内容
const ruleForm = reactive({
    nickname: 'izelin',
    account: 'izelin@qq.com',
    password: '123456',
    checkPass: '123456',
    isChecked: true,
})

// 验证用户名
const validatNickname = (rule, value, callback) => {
    var regx = /^[A-Za-z0-9_-]\w{1,12}$/
    if (value === '') {
        callback(new Error('用户名不能为空'))
    } else if (regx.test(value) == false) {
        callback(new Error('请输入正确的用户名'))
    }
    else {
        callback()
    }
}
// 验证账户(邮箱验证)
const validatAccount = (rule, value, callback) => {
    var regx = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
    if (value === '') {
        callback(new Error('账户名不能为空'))
    } else if (regx.test(value) == false) {
        callback(new Error('请输入正确的账户（邮箱）'))
    }
    else {
        callback()
    }
}

// 验证密码
const validatePass = (rule, value, callback) => {
    var regx = /^[A-Za-z0-9]\w{5,15}$/
    if (value === '') {
        callback(new Error('密码不能为空'))
    } else if (regx.test(value) == false) {
        callback(new Error('请输入正确的密码格式（6到16位有字母数字组成）'))
    }
    else {
        callback()
    }
}

// 二次验证密码
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('确认密码不能为空'))
    } else if (value !== ruleForm.password) {
        callback(new Error("两次输入的密码不相同"))
    } else {
        callback()
    }
}
// 验证是否阅读用户协议和隐私政策
const validateIsChecked = (rule, value, callback)=>{
    if (!ruleForm.isChecked) {
        callback(new Error('请阅读用户协议 和 隐私政策'));
    }else{
        callback();
    }
}

// 给输入框添加验证
const rules = reactive({
    nickname: [{ validator: validatNickname, trigger: 'blur' }],
    account: [{ validator: validatAccount, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
    isChecked: [{ validator: validateIsChecked, trigger: 'blur' }],
})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            // 输入框验证通过 可以发起登录请求
            axios({
                url: "http://124.71.66.63:9090/user/register",
                method: "POST",
                data: {
                    account: ruleForm.account,
                    password: ruleForm.password,
                    nickName: ruleForm.nickname
                },
                headers: { 'content-type': 'application/x-www-form-urlencoded' }
            }).then(res => {
                console.log('register', res);
                if (res.data.isSuccess == true) {
                    ElMessage({
                        message: res.data.data,
                        type: 'success',
                    })
                    router.push('/login')
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: 'error',
                    })
                }
            })

        } else {
            console.log('error submit!')
        }
    })
}


const goLogin = () => {
    // 跳转注册页面
    console.log(router);
    router.push('/login');
}

</script>
<template>
    <div class="register">
        <div class="left">

        </div>
        <div class="right">
            <div class="header">
                <img style="height: 80px;" src="../assets/element-plus-logo.svg" alt="Element logo" />
                <div class="flex-grow" />
                <el-link :underline="false">用户协议</el-link>
                <el-link :underline="false">隐私政策</el-link>
                <el-link :underline="false">帮助中心</el-link>
            </div>
            <div class="container">
                <div class="form-box">
                    <div class="form-title">
                        <el-link :underline="false" @click="goLogin()">登录</el-link>
                        <el-link :underline="false">注册</el-link>
                    </div>
                    <div class="form-body">
                        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                            label-width="auto" class="demo-ruleForm">

                            <el-form-item prop="nickname">
                                <el-input placeholder="用户名" v-model="ruleForm.nickname" autocomplete="off" />
                            </el-form-item>

                            <el-form-item prop="account">
                                <el-input placeholder="账号" v-model="ruleForm.account" autocomplete="off" />
                            </el-form-item>

                            <el-form-item prop="password">
                                <el-input placeholder="密码" v-model="ruleForm.password" type="password"
                                    autocomplete="off" />
                            </el-form-item>

                            <el-form-item prop="checkPass">
                                <el-input placeholder="确认密码" v-model="ruleForm.checkPass" type="password"
                                    autocomplete="off" />
                            </el-form-item>
                            <el-form-item prop="isChecked">
                                <el-checkbox size="large" v-model="ruleForm.isChecked">已阅读并同意旗舰商城账号
                                    <el-link>用户协议</el-link> 和 <el-link>隐私政策</el-link> </el-checkbox>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="submitForm(ruleFormRef)">
                                    注册
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="form-footer">
                        <!-- <el-link :underline="false">忘记密码</el-link> -->
                    </div>

                </div>
            </div>
        </div>
        <!-- <router-link  to="/register">去注册</router-link> -->
    </div>
</template>
<style lang="less">
.flex-grow {
    flex-grow: 1;
}



// img {
//   width: 150px;
//   height: 150px;
//   border-radius: 20px;
// }

.register {
    width: 100%;
    height: 100%;
    background: url('../assets/image/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: flex;
    // align-items: center;

    .left {
        width: 500px;
        flex-grow: 0;
    }

    .right {
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        // align-items: center;
        flex-wrap: 1;
        transition: 0.5s;

        .header {
            display: flex;
            margin: 0 20px;

            .el-link--default {
                padding: 0 10px;
            }

        }

        .container {
            width: 100%;
            height: 100%;
            flex-grow: 1;
            // background-color: #f5f5f5;
            position: relative;

            .form-box {
                width: 360px;
                height: 500px;
                display: block;
                margin: auto;
                // background-color: #fff;
                border-radius: 5px;
                box-shadow: var(--el-box-shadow);
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;

                padding: 40px 45px;

                .form-title {
                    display: flex;
                    width: 100%;
                    height: 50px;
                    padding: 0 0 10px 0;
                    // .el-link--default {
                    //   width: 100px;
                    //   height: 50px;
                    //   line-height: 50px;
                    //   display: block;
                    //   font-size: 32px;

                    //   font-weight: bold;
                    //   // padding: 0 10px;
                    // }
                    .el-link--default {
                        width: 100px;
                        height: 50px;
                        line-height: 50px;
                        display: block;
                        font-size: 32px;

                        font-weight: bold;
                        // padding: 0 10px;

                        &:nth-child(1) {
                            .el-link__inner {
                                color: #BBBBBB;
                            }

                        }

                        &:nth-child(2) {
                            .el-link__inner {
                                color: #333333;
                                border-bottom: 2px solid #409EFF;
                            }
                        }
                    }
                }

                .form-body {
                    margin: 20px 0 0 0;

                    .el-input {
                        margin: 6px 0;

                        .el-input__inner {
                            margin: 10px 12px;
                        }
                    }

                    .el-button--primary {
                        width: 100%;
                        height: 45px;
                    }

                    .el-checkbox__label {
                        color: #AAAAAA;
                    }
                }


            }
        }


        .logo {
            margin-left: 50px;
        }

        .logo img {
            border-radius: 0px;
        }
    }
}

@media screen and (max-width: 800px) {
    .register {
        .left {
            width: 0;
        }
    }
}

@media screen and (max-width: 1700px) {
    .register {
        background-size: auto 100%;
    }
}

// .logo {
//   width: 150px;
//   height: 150px;
//   margin-right: 50px;
// }</style>